<script setup lang="ts">
import { onMounted, reactive, nextTick, ref } from "vue";
import useInstance from "@/hooks/useInstance";
const { global } = useInstance();


const myChart = ref<HTMLElement>();

// const mianHeight = ref(0);

const builderJson = {
    all: 1230,
    charts: {
        智能制造学院: 200,
        酒馆学院: 100,
        医药与卫生学院: 80,
        轻化与材料学院: 100,
        能源与汽车工程学院: 200,
        人文学院: 100,
        外语外贸学院: 150,
        设计学院: 200,
        商学院: 100,
    } as Record<string, number>
};

const downloadJson: Record<string, number> = {
    '女生': 579,
    '男生': 836,

};


const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d')!;
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.08;
ctx.font = '20px Microsoft Yahei';
ctx.translate(50, 50);
ctx.rotate(-Math.PI / 4);


//柱状图
const charts1 = () => {
    const echartInstance = global.$echarts.init(myChart.value);
    let option = reactive({
        backgroundColor: {
            type: 'pattern',
            image: canvas,
            repeat: 'repeat'
        },
        tooltip: {},
        title: [
            {
                text: '各学院使用人数',
                subtext: '总计 ' + builderJson.all,
                left: '15%',
                textAlign: 'center'
            },
            {
                text: '男女比例',
                subtext:
                    '总计 ' +
                    Object.keys(downloadJson).reduce(function (all, key) {
                        return all + downloadJson[key];
                    }, 0),
                left: '70%',
                textAlign: 'center'
            },
        ],
        grid: [
            {
                top: 60,
                width: '50%',
                bottom: '25%',
                left: 10,
                containLabel: true
            }
        ],
        xAxis: [
            {
                type: 'value',
                max: 400,
                splitLine: {
                    show: false
                }
            },
        ],
        yAxis: [
            {
                type: 'category',
                data: Object.keys(builderJson.charts),
                axisLabel: {
                    interval: 0,
                    rotate: 30
                },
                splitLine: {
                    show: false
                }
            }
        ],
        series: [
            {
                type: 'bar',
                stack: 'chart',
                z: 3,
                label: {
                    position: 'right',
                    show: true
                },
                data: Object.keys(builderJson.charts).map(function (key) {
                    return builderJson.charts[key];
                })
            },
            {
                type: 'pie',
                radius: [0, '40%'],
                center: ['70%', '45%'],
                data: Object.keys(downloadJson).map(function (key) {
                    return {
                        name: key,
                        value: downloadJson[key]
                    };
                })
            }
        ],
    })
    echartInstance.setOption(option);
};
onMounted(() => {
    charts1();
    // nextTick(() => {
    //     mianHeight.value = window.innerHeight - 90;
    // });
});

</script>
    
<template>

    <div ref="myChart" :style="{ width: '550px', height: '400px' }"></div>

</template>
    
<style scoped lang="scss">

</style>